<template>
	<view class="content">
		<!-- 订单单号 -->
<!-- 		<view class="dateils-cell">
			<u-cell-item :title="'订单号: '+ orderList.trade_no" :arrow="false"></u-cell-item>
			<u-cell-item :title="'状态: '+ orderList.status_str" :arrow="false"></u-cell-item>
			<u-cell-item :title="'订单金额: ￥'+ orderList.fee " :arrow="false"></u-cell-item>
			<u-cell-item :title="'驳回理由: '+ orderList.refund_info.refuse_reason" :arrow="false" v-if="orderList.refund_info.refuse_reason"></u-cell-item>
		</view> -->
		<view class="dateils"> <text>订单号</text>:{{orderList.trade_no}}</view>
		<view class="dateils"> <text>状态</text>:{{orderList.status_str}}</view>
		<view class="dateils"><text>订单金额</text>:<view style="color: #d60000;display: inline">￥{{orderList.fee}} </view></view>
		<view class="dateils" v-if="orderList.refund_info.refuse_reason"><text>驳回理由:</text>{{orderList.refund_info.refuse_reason}}</view>
		<!-- 订单数量 -->
		<view class="dateils-top">{{orderList.body}}</view>
		<view class="dateils-content">
			<view><text>数 量</text> : {{orderList.quantity}}</view>
			<view><text>下单日期</text> : {{orderList.create_time}}</view>
		</view>
		<!-- 订单联系 -->
		<view class="dateils-top">联系人信息</view>
		<view class="dateils-content">
			<view> <text>联系人</text>  : {{orderList.link_name}}</view>
			<view> <text>联系人</text>  : {{orderList.link_mobile}}</view>
			<view> <text>演出时间</text> : {{orderList.ticket_plan.plan_time}} {{orderList.ticket_plan.play_date}}</view>
		</view>
		<view class="main" >
			<view class="left">
				<u-button :plain="true" size="mini" @click="canShow = true" v-if="(orderList.status == 1)">取消订单</u-button>
				<u-button type="warning" size="mini" @click="getGopay()" v-if="orderList.status == 0" >继续支付</u-button>
			</view>
			<view class="right">
				<u-button :plain="true" size="mini" @click="toPage">返回</u-button>
			</view>
		</view>
		<u-modal v-model="canShow" title="取消订单" :show-confirm-button="false" :mask-close-able="true">
			<view class="form-input">
				<u-form :model="form" ref="uForm" label-width="0" :border-bottom="false">
					<u-form-item prop="name">
						<u-input v-model="form.name" placeholder="请填写取消理由" :border="true" />
					</u-form-item>
				</u-form>
				<view class="form-btn">
					<u-button type="success" size="medium" @click="apply">申请取消</u-button>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				orderList: [],
				applyId: '',
				canShow: false
			};
		},
		onLoad(e) {
			this.applyId = e
			this.getOrderList(e)
		},
		methods: {
			apply(e) {
				if (!(this.form.name)) {
					this.$refs.uToast.show({
						title: '请填写取消理由',
						type: 'error',
					})
				} else {
					this.$refs.uToast.show({
						title: '您已申请成功',
						type: 'success',
					})
					this.getRefund(e)
				}
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['4EOjk-JS1AQsV41z7ECDO69QTaMp13FaOP-uFx3M1w4'],
				// 	success(res) {
				// 		if (res.errMsg == 'requestSubscribeMessage:ok') {
				// 			//用户同意了订阅，允许订阅消息W
				// 			uni.showToast({
				// 				title: '订阅成功'
				// 			})
				// 		} else {
				// 			//用户拒绝了订阅，禁用订阅消息
				// 			uni.showToast({
				// 				title: '订阅失败'
				// 			})
				// 		}
				// 		that.getRefund(e)
				// 	}
				// })
			},
			toPage(path) {
				this.$u.route({
					type: 'reLaunch',
					url:'pages/order/order_list'
				});
			},
			getOrderList(e) {
				let that = this;
				let postData = {
					"order_id": e.id,
				};
				that.$u.post('/api/order/details', postData).then(res => {
					that.orderList = res
				});
			},
			getGopay() {
				let that = this;
				let postData = {
					"order_id": that.applyId.id
				};
				uni.getProvider({
					service: 'oauth',
					success: function(pro) {
						console.log(pro.provider[0]);
						that.$u.post('/api/pay/gopay', postData).then(res => {
							uni.requestPayment({
								provider: pro.provider[0],
								timeStamp: res.timeStamp,
								nonceStr: res.nonceStr,
								package: res.package,
								signType: res.signType,
								paySign: res.paySign,
								// #ifdef  MP-ALIPAY
								orderInfo: res,
								// #endif
								success(res) {
									that.$u.route({
										type: 'navigateTo',
										url: 'pages/order/order_dateils?id=' +
											that.applyId.id,
									})
								},
								fail(res) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									})
									// setTimeout(()=>{
									// 	that.$u.route({
									// 		type: 'navigateTo',
									// 		url: 'pages/order/order_dateils?id=' + that.applyId.id,
									// 	})
									// },2000)
									console.log("回调失败", res)
								}
							})
						})
					}
				});
			},
			// 发起退款
			getRefund(e) {
				let that = this;
				let postData = {
					"order_id": that.applyId.id,
					"remark": this.form.name
				};
				that.$u.post('/api/order/refund', postData).then(res => {
					console.log(res)
					uni.navigateBack();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.dateils {
			background-color: #FFFFFF;
			padding: 30rpx;
			border-bottom: 1rpx solid #eaecec;
			text {
				display: inline-block;
				text-align: justify;
				text-align-last: justify;
				width: 60px;
				margin-right: 3px;
			}
		}
		.dateils-cell {
			background-color: #FFFFFF;
		}

		.dateils-top {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			border-bottom: 1rpx solid #eaecec;
		}

		.dateils-content {
			padding: 10rpx 30rpx;
			background-color: #FFFFFF;
			color: #858789;
			view {
				padding: 10rpx 0rpx;
			}
			text {
				display: inline-block;
				text-align: justify;
				text-align-last: justify;
				width: 60px;
				margin-right: 3px;
			}
		}

		.dateils-bottom {
			background-color: #FFFFFF;
			padding: 30rpx;
			border-top: 1rpx solid #eaecec;
		}
		.form-input {
			background-color: #FFFFFF;
			padding: 50rpx;
			padding-bottom: 0rpx;
		}
		.form-btn {
			padding: 50rpx;
			text-align: center;
		}

		.main {
			padding: 35rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			.left {
				
			}
		}
	}
</style>
